<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Node对象</title>
		<style>
			div{
				border:1px solid red;
			}
			#div1{
				width: 200px;
				height: 200px;
			}
			#div2{
				width: 100px;
				height: 100px;
			}
			#div3{
				width: 50px;
				height: 50px;
			}
			
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				div2
			</div>
			div1
		</div>
		<a href="javascript:void(0);" id="del">删除子节点</a>
		
		<a href="javascript:void(0);" id="add">添加子节点</a>
		<!--<input type="button" id="del" value="删除节点" />-->
		<script>
			//获取超链接
			var element_del = document.getElementById("del");
			//绑定单击事件
			element_del.onclick = function(){
				var div1 = document.getElementById("div1");
				
				var div2 = document.getElementById("div2");
				
				div1.removeChild(div2);
			}
			
			
			//获取超链接
			var element_add = document.getElementById("add");
			//绑定单击事件
			element_add.onclick = function(){
				var div1 = document.getElementById("div1");
				//给div1创建子节点
				//创建div节点
				var div3 = document.createElement("div");
				div3.setAttribute("id","div3");
				div1.appendChild(div3);
			}
			
			var div2 = document.getElementById("div2");
			var div1 = div2.parentNode;
			alert(div1);
			
			/*
			超链接功能
				1.可以被点击，样式
				2.点击后跳转到href指定的url
				
			需求：保留1功能，去掉2功能
			实现：href = "javascript:void(0);"
			 */
		</script>
	</body>
</html>
